<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>通知管理</title>
</head>
<body>
<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-title">
            通知信息列表
        </div>
        <div class="panel-body table-responsive">
            <table id="myTable" class="table display"></table>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加通知信息</h4>
            </div>
            <div class="modal-body">
                <!-- Start Row -->
                <div class="row">

                    <div class="form-horizontal">
                        <div :class="clazz.titleClazz">
                            <label for="title" class="col-sm-2 control-label form-label">标题</label>
                            <div class="col-sm-9">
                                <input @change="initClazz($event)" type="text" maxlength="128" class="form-control" id="title" placeholder="关于XXX的通知" v-model="title" />
                            </div>
                        </div>
                        <div :class="clazz.noticeContentClazz">
                            <label for="noticeContent" class="col-sm-2 control-label form-label">通知内容</label>
                            <div class="col-sm-9">
                                <textarea @change="initClazz($event)" rows="10" class="form-control" id="noticeContent" placeholder="请输入内容..." v-model="noticeContent" ></textarea>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- End Row -->
            </div>
            <div class="modal-footer" style="margin-top: 0px">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button id="saveBtn" @click="saveInfo()" type="button" class="btn btn-default">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- End Moda Code -->

<script>
    $(function() {
        var defOrder = [3, 'asc']; //默认排序列. mark一下，要记得改
        var _table = $('#myTable').DataTable({
            dom: '<"top"Blf<"clear">>rt<"bottom"ip<"clear">>',
            // dom: 'Bfrtip',
            lengthMenu: [10, 25, 50, 75, 100],
            pageLength: 10,
            language: dtlanguage,//中文
            select: true,
            ordering: true,
            order: [defOrder],//表示初期第n列降序排序，使用thymeleaf一定要把双中括号分开写
            processing: true,
            serverSide: true,
            ajax: {
                url: '/service/aNotice/queryPage',
                type: 'post',
                contentType: "application/json;charset=UTF-8",
                dataType: 'json',
                // 传给服务器的数据，可以添加我们自己的查询参数
                data: function (param) {
                    var orderBy = '';
                    if (param.order != null && param.order.length > 0) {
                        param.order.forEach((o, i) => {
                            orderBy += param.columns[o.column].data + " " + o.dir + ",";
                        });
                        orderBy = orderBy.substring(0, orderBy.length - 1);
                    }
                    var data = {
                        draw: param.draw,
                        search: param.search.value,
                        limit: param.length,
                        offset: param.start,
                        orderBy: orderBy
                    }
                    //当请求需要传递JSON数据格式的参数时，前台应该在JS中使用JSON.stringify()方法，将JSON数据转换成String类型
                    return JSON.stringify(data);
                },
                //预先处理服务器端返回的数据，修改成DT能用格式 draw、recordsTotal、recordsFiltered、data。
                dataFilter: function (text, type) {
                    if (!isEmpty(text)) {
                        var json = JSON.parse(text);//字符串转json
                        if (json.success) {
                            var qbean = json.data;
                            var data = {
                                draw: json.code,
                                recordsTotal: qbean.total,
                                recordsFiltered: qbean.total,
                                data: qbean.list
                            }
                            text = JSON.stringify(data);//json转字符串
                        }
                    }
                    return text;//返回字符串
                },
                //用于处理服务器端返回的数据。 dataSrc是DataTable特有的
                dataSrc: function (data) {
                    if (data.data == null) {
                        return '';
                    } else {
                        return data.data;
                    }
                }
            },
            buttons:[
                {
                    text:'<i class="fa fa-plus"></i>添加通知',
                    className:'btn btn-square btn-success',
                    action: function (e, dt, node, config) {
                        myFormApp.initData();//清空表单
                        $('#myModal').modal('show');
                    }
                },{
                    text:'<i class="fa fa-trash-o"></i>删除通知',
                    className:'btn btn-square btn-danger',
                    action: function (e, dt, node, config) {
                        var datas = dt.rows('.selected').data();
                        if(datas!=null && datas.length>0) {
                            swal({
                                    title: "你确定要批量删除通知吗?",
                                    text: "如果系统已经正常使用，请慎重操作！",
                                    type: "warning",
                                    showCancelButton: true,
                                    confirmButtonText: "确定",
                                    cancelButtonText: "取消"
                                },
                                function(isConfirm){
                                    if (isConfirm) {
                                        var noticeIds = [];
                                        datas.each((d, i) => {
                                            noticeIds.push(d.noticeId);
                                        });
                                        put('/service/aNotice/removeList', function (result) {
                                            if(result.success){
                                                spop({
                                                    template: '批量删除通知成功',
                                                    autoclose: 5000,
                                                    style:'success'
                                                });
                                                _table.ajax.reload(null, false);//刷新列表
                                            }else {
                                                spop(result.message, 'error');
                                            }
                                        }, noticeIds);
                                    }
                                });
                        }else{
                            spop({
                                template: '请选择要执行删除的行',
                                autoclose: 5000,
                                style:'warning'
                            })
                        }
                    }
                }
            ],
            rowId: 'noticeId',
            columns: [
                {
                    data: 'title',
                    title: '通知标题',
                    defaultContent: '--',
                    orderable: true
                },{
                    data: 'noticeContent',
                    title: '通知内容',
                    defaultContent: '--'
                },{
                    data: 'fullname',
                    title: '发布者',
                    defaultContent: '--',
                    render:function (data, type, row, meta) {
                        if(isEmpty(data))
                            return row.username;
                        else
                            return data;
                    }
                }, {
                    data: 'createTime',
                    title: '创建时间',
                    defaultContent: '--',
                    orderable: true
                }
            ],
            columnDefs: [
                {
                    targets: 4,//最后一列 从0开始  mark一下，要记得改
                    title: '操作',
                    orderable: false,
                    render: function (data, type, row, meta) {
                        return [
                            '<button type="button" class="del-btn btn btn-danger btn-icon" data-noticeid="' + row.noticeId + '"><i class="fa fa-trash-o"></i></button>'
                        ].join('');
                    }
                }
            ]
        });

        //方法
        var methods = {
            //保存通知信息
            saveInfo:function () {
                if(isEmpty(this.title)){
                    spop("通知标题不能为空", 'error');
                    this.$set(this.clazz,'titleClazz','form-group has-error');
                    return;
                }
                if(this.title.length>128){
                    spop("通知标题过长", 'error');
                    this.$set(this.clazz,'titleClazz','form-group has-error');
                    return;
                }
                if(isEmpty(this.noticeContent)){
                    spop("通知内容不能为空", 'error');
                    this.$set(this.clazz,'noticeContentClazz','form-group has-error');
                    return;
                }

                var _this = this;
                put('/service/aNotice/editOne',function (result) {
                    if(result.success) {
                        spop({
                            template: '保存成功',
                            autoclose: 5000,
                            style:'success'
                        });
                        _table.ajax.reload(null, false);//刷新列表
                        $('#myModal').modal('hide');
                    }else
                        spop(result.message, 'error');
                },{
                    noticeId: _this.noticeId,
                    title: _this.title,
                    noticeContent: _this.noticeContent
                });
            },
            //初始化输入框样式 change时调用
            initClazz:function (event) {
                var id = event.target.id;
                if(this.clazz[id+'Clazz']!=='form-group'){
                    this.$set(this.clazz, id+'Clazz', 'form-group');
                }
            },
            //初始化表单
            initData:function () {
                this.$set(this,'clazz',{
                    titleClazz: 'form-group',
                    noticeContentClazz: 'form-group'
                });
                this.$set(this,'noticeId',null);
                this.$set(this,'title',null);
                this.$set(this,'noticeContent',null);
            }
        }
        //表单vue
        var myFormApp = new Vue({
            el:'#myModal',
            //属性
            data:{
                clazz:{
                    titleClazz:'form-group',
                    noticeContentClazz:'form-group'
                },
                noticeId:null,
                title:null,
                noticeContent:null
            },
            methods: methods,
            mounted:function () {},
            updated: function () {}
        });

        //删除
        $('#myTable tbody').on('click', 'button.del-btn', function () {
            var noticeId = $(this).data('noticeid');
            swal({
                    title: "你确定要删除通知吗?",
                    text: "如果系统已经正常使用，请慎重操作！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消"
                },
                function(isConfirm){
                    if (isConfirm) {
                        del('/service/aNotice/removeOne/'+noticeId,function (result) {
                            if(result.success){
                                spop({
                                    template: '通知删除成功',
                                    autoclose: 5000,
                                    style:'success'
                                });
                                _table.ajax.reload(null, false);//刷新列表
                            }else {
                                spop(result.message, 'error');
                            }
                        })
                    }
                });
        });

    });
</script>
</body>
</html>